<template>
  <div
    ref="customForm"
    class="custom-van-uploader custom-form-container"
  >
    <van-dialog
      v-model="previewFile.show"
      title="文件预览"
      get-container="#app"
      confirm-button-text="下载文件"
      show-cancel-button
      :show-confirm-button="isDownload"
      @confirm="downLoadFile"
    >
      <div class="file-preview-file">
        <lazy-component>
          <img
            v-lazy="previewUrl"
            class="file"
          >
        </lazy-component>
        <span class="van-ellipsis file-name">
          <i class="van-icon van-icon-description" />
          {{ preview.file.name }}</span>
      </div>
    </van-dialog>
    <FieldLabel
      :error-message="errorMessage"
      :label="label"
      :required="required"
    >
      <van-uploader
        v-model="upLoaderList"
        :before-read="beforeRead"
        accept="*"
        :max-size="maxSize"
        :after-read="afterRead"
        :max-count="mCount"
        :deletable="!canDo"
        :disabled="canDo"
        :preview-full-image="false"
        @oversize="onOversize"
        @click-preview="onPreview"
      >
        <template #preview-cover="{ file }">
          <div class="preview-cover van-ellipsis">
            {{ file.name }}
          </div>
        </template>
        <van-button
          size="small"
          icon="plus"
          type="info"
        >
          上传文件
        </van-button>
      </van-uploader>
    </FieldLabel>
  </div>
</template>

<script>
import field from '../mixins/field'
import uploader from '../mixins/uploader'
import model from '../mixins/model'
import rule from '../mixins/rule'
import disabled from '../mixins/setting/disabled'
import collect from '../mixins/collect/uploader'

export default {
  name: 'CustomVanUploader',

  mixins: [field, model('change'), rule, disabled, collect, uploader],
}
</script>

<style lang="scss" scoped>
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.file-preview-file {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: $padding-sm 0;
  .file {
    height: 100px;
  }
  .file-name {
    margin-top: 5px;
    width: 100%;
    color: $gray;
    font-size: $font-xs;
  }
}
</style>
